<template>
	<view class="boxAll">
		<Totle title="粉丝"></Totle>
		<view class="box1">
			<view class="box_img">
				<img src="https://img2.baidu.com/it/u=1305802952,2162402570&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="" class="_img" />
				<p style="font-size: 37rpx;">游客x26a5f6as1f</p>
				<p>关注了你 <span>12-20</span></p>
			</view>
			<button :class="isLook1? 'okLook':'noLook'" @click="upLook1()" id="isok">+回关</button>
			<button :class="isLook1? 'noLook':'okLook'" @click="upLook1()">互为关注</button>
		</view>
		<view class="box1">
			<view class="box_img">
				<img src="https://img2.baidu.com/it/u=1508601812,3624056742&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" alt="" class="_img" />
				<p style="font-size: 37rpx;">游客15ASd7454</p>
				<p>关注了你 <span>12-20</span></p>
			</view>
			<button :class="isLook2? 'okLook':'noLook'" @click="upLook2()" id="isok">+回关</button>
			<button :class="isLook2? 'noLook':'okLook'" @click="upLook2()">互为关注</button>
		</view>
		<view class="box1">
			<view class="box_img">
				<img src="https://img0.baidu.com/it/u=2912436093,2292393628&fm=253&fmt=auto?w=800&h=800" alt="" class="_img" />
				<p style="font-size: 37rpx;">游客x26a5f6as1f</p>
				<p>关注了你 <span>12-20</span></p>
			</view>
			<button :class="isLook3? 'okLook':'noLook'" @click="upLook3()" id="isok">+回关</button>
			<button :class="isLook3? 'noLook':'okLook'" @click="upLook3()">互为关注</button>
		</view>
		<view class="box1">
			<view class="box_img">
				<img src="https://img2.baidu.com/it/u=2462971941,1032368961&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500" alt="" class="_img" />
				<p style="font-size: 37rpx;">游客ad53s415f44</p>
				<p>关注了你 <span>12-20</span></p>
			</view>
			<button :class="isLook4? 'okLook':'noLook'" @click="upLook4()" id="isok">+回关</button>
			<button :class="isLook4? 'noLook':'okLook'" @click="upLook4()">互为关注</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import Totle from "../../Totle.vue";

	const isLook1 = ref(false);
	const upLook1 = () => {
		isLook1.value = !isLook1.value;
	};
	const isLook2 = ref(false);
	const upLook2 = () => {
		isLook2.value = !isLook2.value;
	};
	const isLook3 = ref(false);
	const upLook3 = () => {
		isLook3.value = !isLook3.value;
	};
	const isLook4 = ref(true);
	const upLook4 = () => {
		isLook4.value = !isLook4.value;
	};
</script>

<style lang="scss">
	.boxAll {
		width: 100vw;
		height: 100vh;
		background-color: black;
		color: white;
	}

	.box1 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100vw;
		height: 4.5rem;
		background-color: black;
		border-bottom: 1px solid gray;
	}

	.box_img {
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: center;
		margin-left: 1rem;
		flex-direction: column;
		flex-wrap: wrap;
	}

	._img {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
	}

	.okLook {
		border-radius: 20px;
		background-color: gray;
		color: white;
		display: block;
		font-size: 23rpx;
	}

	#isok {
		color: black;
		background-color: #f7d80a;
	}

	.noLook {
		display: none;
	}
</style>